import React from 'react';
import { Button, Collapse, Tag, Divider } from 'antd';

const { Panel } = Collapse;

class AnswerBackReadOnly extends React.Component {
  componentDidMount() {
    if (this.props.onRef) {
      this.props.onRef(this);
    }
  }

  render() {
    const { answer, index, editAnswer, removeAnswer } = this.props;
    const slotAnswerHeader = () => {
      return <>
        {answer.slotValues && answer.slotValues.length > 0 ? answer.slotValues.map((slotValueItem, slotValueIndex) => {
          return (
            <>
              <span key={slotValueIndex}>
                &lt;{slotValueItem.slotName}&gt;=
                <Tag color="#108ee9">
                  {slotValueItem.values.map((tag, tagIndex) => {
                    return (
                      <span key={tagIndex} style={{ marginLeft: 5, marginRight: 5 }}>
                        {tag}
                      </span>
                    );
                  })}
                </Tag>
              </span>
              {slotValueIndex + 1 < answer.slotValues.length ? (
								<Divider type="vertical" />
							) : null}
            </>
          );
        }) : null}
        {answer.slotValues && answer.slotValues.length > 0 && answer.userTagIdList && answer.userTagIdList.length > 0 ? (
          <Divider type="vertical" />
        ) : null}
        {answer.userTagIdList && answer.userTagIdList.length > 0 ? (
          <span>
            <span>&lt;{'用户标签'}&gt;=</span>
            {answer.userTagIdList.map((tag, tagIndex) => {
              return (
                <Tag color="#108ee9">
                  <span key={tagIndex} style={{ marginLeft: 5, marginRight: 5 }}>{tag.tagName}</span>
                </Tag>
              );
            })}
          </span>
        ) : null}
      </>
    };
    return (
      <Collapse key={index}>
        <Panel
          header={answer.isDefault ? '默认答案' : slotAnswerHeader()}
          key={index}
        >
          <div dangerouslySetInnerHTML={{ __html: answer.content }} />
        </Panel>
      </Collapse>
    );
  }
}

export default AnswerBackReadOnly;
